import React, { useState } from'react';
import '../component/style.css'
import { Card } from 'antd-mobile';
function App() {
    const [selectedCategory, setSelectedCategory] = useState('可回收物');

    const categories = [
        {
            name: '可回收物',
            items: [
                { name: '有害垃圾', description: '可回收物就是可以再生循环的垃圾。本身或材质可再利用的纸类、硬纸板、玻璃、塑料、金属、塑料包装，与这些材质有关的如：报纸、杂志、广告单及其它干净的纸类等皆可回收。' },
                { name: '废纸', items: ['报纸', '杂志', '图书图书', '各种包装纸', '办公用纸', '纸盒'] },
                { name: '塑料', items: ['塑料袋', '塑料包装物', '次性塑料餐盒'] }
            ]
        },
        {
            name: '湿垃圾',
            items: ['剩菜剩饭', '果皮果核', '花卉绿植', '中药药渣']
        },
        {
            name: '干垃圾',
            items: ['一次性餐具', '污染纸张', '破旧陶瓷品', '灰土']
        },
        {
            name: '有害垃圾',
            items: ['废电池', '废灯管', '废药品', '废油漆']
        }
    ];

    const handleCategoryClick = (category) => {
        setSelectedCategory(category);
    };

    return (
        
        <div className="app-container">
            <div className="category-list">
                {categories.map(category => (
                    <div
                        key={category.name}
                        className="category-item"
                        onClick={() => handleCategoryClick(category.name)}
                    >
                        {category.name}
                    </div>
                ))}
            </div>
            <div className="content-container">
                {categories.find(category => category.name === selectedCategory)?.items.map(item => (
                    <Card key={item.name} className="content-item">
                        {typeof item === 'object' && item.name && (
                            <>
                                <h3 className="item-title">{item.name}</h3>
                                {item.description && <p className="item-description">{item.description}</p>}
                                {item.items && item.items.length > 0 && (
                                    <Card className="sub-item-list">
                                        {item.items.map(subItem => (
                                            <li key={subItem} className="sub-item">{subItem}</li>
                                        ))}
                                    </Card>
                                )}
                            </>
                        )}
                        {typeof item ==='string' && <p className="item-description">{item}</p>}
                    </Card>
                ))}
            </div>
        </div>
    );
}

export default App;